<template>
  <div class="app-container home">
    <div v-show="show">
      <span>首次登录需要先修改密码</span>
      
      <router-link to="/system/resetPwd">
        <span class="changePwd">===>更改密码</span>
      </router-link>
    </div>
    <div v-show="!show">
    <div class="top">
      <div class="one">
        <div class="container">
          <div class="row">今日</div>
          <div>
            <span class="content">
              <span class="collecting">代收</span>
              <ul class="center">
                <li>金额&nbsp;&nbsp;&nbsp;{{ todayData.todayIncome }}</li>
                <li>笔数&nbsp;&nbsp;&nbsp;{{ todayData.todayIncomeNum }}</li>
                <li class="text-strong" v-hasPermi="[9]">毛利&nbsp;&nbsp;&nbsp;{{ todayData.todayIncomeRate }}</li>
              </ul>
            </span>
            <span class="content">
              <span class="collecting">代付</span>
              <ul class="center">
                <li>金额&nbsp;&nbsp;&nbsp;{{ todayData.todayOutcome }}</li>
                <li>笔数&nbsp;&nbsp;&nbsp;{{ todayData.todayOutcomeNum }}</li>
                <li class="text-strong" v-hasPermi="[9]">毛利&nbsp;&nbsp;&nbsp;{{ todayData.todayIncomeRate }}</li>
              </ul>
            </span>
            <span class="content">
              <span class="collecting">转账/提现</span>
              <ul class="center">
                <li>金额&nbsp;&nbsp;&nbsp;{{ todayData.todayBalance }}</li>
                <li>笔数&nbsp;&nbsp;&nbsp;{{ todayData.todayBalanceNum }}</li>
                <!-- <li class="text-strong">毛利INR0</li> -->
              </ul>
            </span>
          </div>
        </div>
      </div>
      <div class="one">
        <div class="container">
          <div class="row">昨日</div>
          <div>
            <span class="content">
              <span class="collecting">代收</span>
              <ul class="center">
                <li>金额&nbsp;&nbsp;&nbsp;{{ yesterdayData.yesterdayIncome }}</li>
                <li>笔数&nbsp;&nbsp;&nbsp;{{ yesterdayData.yesterdayIncomeNum }}</li>
                <li v-hasPermi="[9]" class="text-strong">毛利&nbsp;&nbsp;&nbsp;{{
                    yesterdayData.yesterdayIncomeRate
                  }}</li>
              </ul>
            </span>
            <span class="content">
              <span class="collecting">代付</span>
              <ul class="center">
                <li>金额&nbsp;&nbsp;&nbsp;{{ yesterdayData.yesterdayOutcome }}</li>
                <li>笔数&nbsp;&nbsp;&nbsp;{{ yesterdayData.yesterdayOutcomeNum }}</li>
                <li v-hasPermi="[9]" class="text-strong">毛利&nbsp;&nbsp;&nbsp;{{
                    yesterdayData.yesterdayOutcomeRate
                  }}</li>
              </ul>
            </span>
            <span class="content">
              <span class="collecting">转账/提现</span>
              <ul class="center">
                <li>金额INR{{ yesterdayData.yesterdayBalance }}</li>
                <li>笔数 {{ yesterdayData.yesterdayBalanceNum }}</li>
                <!-- <li class="text-strong">毛利INR0</li> -->
              </ul>
            </span>
          </div>
        </div>
      </div>
      <div class="one">
        <div class="container">
          <div class="row">近30日</div>
          <div>
            <span class="content">
              <span class="collecting">代收</span>
              <ul class="center">
                <li>金额&nbsp;&nbsp;&nbsp;{{ lastData.lastIncome }}</li>
                <li>笔数&nbsp;&nbsp;&nbsp;{{ lastData.lastIncomeNum }}</li>
                <li v-hasPermi="[9]" class="text-strong">毛利&nbsp;&nbsp;&nbsp;{{ lastData.lastIncomeRate }}</li>
              </ul>
            </span>
            <span class="content">
              <span class="collecting">代付</span>
              <ul class="center">
                <li>金额&nbsp;&nbsp;&nbsp;{{ lastData.lastOutcome }}</li>
                <li>笔数&nbsp;&nbsp;&nbsp;{{ lastData.lastOutcomeNum }}</li>
                <li class="text-strong" v-hasPermi="[9]">毛利&nbsp;&nbsp;&nbsp;{{ lastData.lastOutcomeRate }}</li>
              </ul>
            </span>
            <span class="content">
              <span class="collecting">转账/提现</span>
              <ul class="center">
                <li>金额&nbsp;&nbsp;&nbsp;{{ lastData.lastBalance }}</li>
                <li>笔数&nbsp;&nbsp;&nbsp;{{ lastData.lastBalanceNum }}</li>
                <!-- <li class="text-strong">毛利INR0</li> -->
              </ul>
            </span>
          </div>
        </div>
      </div>
    </div>
    <el-row class="border-row">
      <el-col :span="4">
        <div class="bg-color text-content">总余额</div>
      </el-col>
      <el-col :span="6">
        <div class="text-content">{{ allData.totalBalance }}</div>
      </el-col>
      <el-col :span="4">
        <div class="bg-color text-content">统计时间</div>
      </el-col>
      <el-col :span="10">
        <div class="text-content">{{ allData.nowDate }}</div>
      </el-col>
    </el-row>
    <el-row>
      <div id="chat1" style="width: 100%; height: 400px;"></div>
    </el-row>
   </div>
  </div>
</template>

<script setup name="Index">
import * as echarts from 'echarts';
import {chartList, lastList, todayList, totalData, yesterdayList} from '@/api/index.js';
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const show=ref(userStore.isRewritePsd)
console.log(userStore.isRewritePsd);

const todayData = ref({})
const yesterdayData = ref({})
const lastData = ref({})
const allData = ref({})
// const chartData = ref([])
// // 日期
// const dateList = ref([]);
// // 提现金额
// const amountList = ref([])
// // 代收金额
// const incomeList = ref([])
// // 代付金额
// const outcomeList = ref([])

// 获取今日数据
function getTodayData() {
  todayList().then((res) => {
    todayData.value = res.data
  })
}

// 获取昨日数据
function getYesterdayData() {
  yesterdayList().then((res) => {
    yesterdayData.value = res.data
  })
}

// 获取近30日数据
function getLastData() {
  lastList().then((res) => {
    lastData.value = res.data
  })
}

// 获取全部数据
function getTotalData() {
  totalData().then((res) => {
    allData.value = res.data
  })
}

// 获取图形数据
function getChartData() {
  chartList().then((res) => {
    const data = res.data;
    const xAxisData = [];

    const amountList = [];
    const incomeList = [];
    const outcomeList = [];


    data.forEach((item) => {
      xAxisData.push(item.chartDate)
      amountList.push(item.chartBalance)
      incomeList.push(item.chartIncome)
      outcomeList.push(item.chartOutcome)
    })

    const option = {
      title: [
        {
          text: '收款',
        },
        {
          text: '近30日',
          left: 'center',
          top: 'top',
          textStyle: {
            fontSize: 12,
            color: '#333',
          }

        }
      ],
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['代收金额', '代付金额', '服务费'],
        right: "5%",
        top: "1%"
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {

          dataView: {readOnly: false},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisData,
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(127, 127, 127, 1)',
            type: 'dashed', // 线型为虚线
          }
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(127, 127, 127, 1)',
            type: 'dashed', // 线型为虚线
          }
        },
      },
      series: [
        {
          name: '代收金额',
          type: 'line',
          stack: 'Total',
          data: incomeList
        },
        {
          name: '代付金额',
          type: 'line',
          stack: 'Total',
          data: outcomeList
        },
        {
          name: '服务费',
          type: 'line',
          stack: 'Total',
          data: amountList
        }
      ]
    };
    var chartDom1 = document.getElementById('chat1');
    var myChart1 = echarts.init(chartDom1);
    option && myChart1.setOption(option);
  })
}


onMounted(() => {
  getTodayData()
  getYesterdayData()
  getLastData()
  getTotalData()
  getChartData()
})
</script>

<style scoped lang="scss">
.home {
  .top {
    display: flex;
    margin: 0 0 20px 0;
    justify-content: space-between;
  }

  .el-row.border-row {
    width: 99.2%;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .text-content {
    padding: 8px;
    font-size: 12px;
  }

  .bg-color {
    background-color: #f0f9eb;
  }

  li {
    list-style: none;
  }

  .wrapper {
    width: 100%;
    height: 100%;
  }

  .one {
    width: 100%;
    border: 1px solid #e4e7ed;
    height: 220px;
    padding: 10px;
    margin-right: 14px;
    border-radius: 5px;

    .container {
      display: flex;
      flex-direction: column;

      .row {
        width: 100%;
        font-size: 14px;
        padding-bottom: 10px;
      }

      .content {
        display: flex;
        height: auto;
        border-top: #e4e7ed 1px solid;

        .collecting {
          margin-top: 20px;
          width: 80px;
          height: 100%;
        }

        .center {
          text-align: left;
          font-size: 10px;
          display: flex;
          flex-direction: column;

          .text-strong {
            font-weight: 700;
          }
        }
      }
    }
  }
}
.changePwd{
  margin-left: 20px;
  font-size: 20px;
  color: #445ad9;
}
</style>
